<script setup>
import { useRouter } from 'vue-router'
import { defineProps, ref } from 'vue'
import { numValue, toDate, verifiedType } from '@/utils/index'
import { showToast } from 'vant'
import { showImagePreview } from 'vant'

const router = useRouter()
const videoState = ref(false)
const show = ref(false)
let selectCardInfo = {}
const actions = [
  { name: '复制链接', type: 'copy' },
  { name: '分享', type: 'share' }
]

const onSelect = item => {
  if (item.type === 'copy') {
    const textarea = document.createElement('textarea')
    textarea.value = `https://weibo.com/${selectCardInfo.mblog.user.id}/${selectCardInfo.mblog.bid}`
    textarea.style.position = 'fixed'
    textarea.style.opacity = '0'
    document.body.appendChild(textarea)
    textarea.select()
    document.execCommand('copy')
    showToast({
      message: '复制成功',
      icon: 'passed'
    })
    document.body.removeChild(textarea)
  } else {
    window.navigator.share({
      title: '微博',
      text: '',
      url: `https://weibo.com/${selectCardInfo.mblog.user.id}/${selectCardInfo.mblog.bid}`
    })
    showToast({
      message: '分享成功',
      icon: 'passed'
    })
  }
  show.value = false
}

const props = defineProps({
  card: {
    type: Object,
    default: () => {
      return {}
    }
  },
  pageType: {
    type: String,
    default: ''
  },
  banner: {
    type: String,
    default: ''
  },
  longTextContent: {
    type: String,
    default: ''
  }
})

const clickCardItem = card => {
  if (props.pageType === 'detail') return false
  sessionStorage.setItem('cardInfo', JSON.stringify(card))
  router.push({
    path: `/detail/${card.mblog.id}`
  })
}

const imageShowPreview = (pics, picIndex) => {
  showImagePreview({
    images: pics.map(item => item.url),
    startPosition: picIndex,
    loop: false
  })
}

const moreMenu = card => {
  show.value = true
  selectCardInfo = card
}
</script>

<template>
  <div v-if="false" class="video-player mwb-layer" v-show="videoState">
    <div class="mwb-video">
      <video src="" id="vjs_video" class="video-js"></video>
    </div>
  </div>
  <div class="wb-item-wrap">
    <div class="wb-item">
      <div class="card m-panel card9 f-weibo">
        <div class="card-wrap">
          <header class="weibo-top m-box">
            <div class="m-avatar-box m-box-center">
              <a href="javascript:void(0)" class="m-img-box">
                <img :src="card?.mblog?.user?.profile_image_url" />
                <i class="m-icon" :class="verifiedType(card.mblog.user)"></i>
              </a>
            </div>
            <div class="m-box-dir m-box-col m-box-center">
              <div class="m-text-box">
                <a href="javascript:void(0)">
                  <h3 class="m-text-cut">
                    {{ card?.mblog?.user?.screen_name }}
                    <img
                      :src="`https://h5.sinaimg.cn/upload/108/1866/2022/11/02/svip_${card?.mblog.user.mbrank}.png`"
                      class="m-icon vipicon"
                    />
                  </h3>
                  <h4 class="m-text-cut">
                    <span class="time">{{
                      toDate(card.mblog.created_at)
                    }}</span>
                    <span class="from" v-if="card.mblog.source">
                      来自 {{ card.mblog.source }}</span
                    >
                    <span class="time" v-if="card.mblog.edit_count">
                      已编辑</span
                    >
                  </h4>
                </a>
              </div>
            </div>
          </header>
        </div>
        <article class="weibo-main" @click="clickCardItem(card)">
          <div class="card-wrap">
            <div class="weibo-og">
              <div
                v-if="longTextContent.length > 0"
                class="web-text"
                v-html="longTextContent"
              ></div>
              <div v-else class="weibo-text" v-html="card.mblog.text"></div>
              <!-- 图片 -->
              <template v-if="card.mblog.pic_ids.length > 0">
                <div class="weibo-media-wraps weibo-media f-media media-b">
                  <ul class="m-auto-list">
                    <li
                      class="m-auto-box2"
                      :class="{ 'm-auto-box3': card.mblog.pic_num >= 3 }"
                      v-for="(pics, picIndex) in card.mblog.pics"
                      :key="pics.pid"
                      @click.stop="imageShowPreview(card.mblog.pics, picIndex)"
                    >
                      <div class="m-img-box m-imghold-4-3">
                        <img :src="pics.url" class="f-bg-img" />
                      </div>
                    </li>
                  </ul>
                </div>
              </template>
              <!-- 超话 -->
              <template v-if="card.mblog?.page_info?.type.includes('topic')">
                <div class="weibo-media f-media">
                  <div class="weibo-media-wraps">
                    <div class="card m-panel card26">
                      <a href="javascript:void(0)">
                        <div class="card-wrap">
                          <div class="card-main">
                            <div class="m-box">
                              <div class="m-img-box">
                                <img :src="card.mblog.page_info.page_pic.url" />
                              </div>
                              <div class="m-box-col m-box-dir m-box-center">
                                <div class="m-text-box">
                                  <h3 class="m-text-cut">
                                    {{ card.mblog.page_info.page_title }}
                                  </h3>
                                  <h4 class="m-text-cut">
                                    {{ card.mblog.page_info.content1 }}
                                  </h4>
                                  <h4
                                    class="m-text-cut"
                                    v-if="card.mblog.page_info.content2"
                                  >
                                    {{ card.mblog.page_info.content2 }}
                                  </h4>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </a>
                    </div>
                  </div>
                </div>
              </template>
              <!-- 视频 -->
              <template v-if="card.mblog?.page_info?.type === 'video'">
                <div class="weibo-media f-media">
                  <div class="weibo-media-wraps">
                    <div class="card-video type-video vertical">
                      <div class="mwb-video mwbv-play mwbv-info">
                        <div class="m-img-box">
                          <img
                            :src="card.mblog.page_info.page_pic.url"
                            alt=""
                          />
                        </div>
                        <button class="mwbv-play-button">
                          <van-icon name="play" />
                        </button>
                        <div class="mwbv-info-bar">
                          <div class="m-box">
                            <div class="m-box-col">
                              {{ card.mblog.page_info.play_count }}
                            </div>
                            <div class="time">
                              {{ card.mblog.page_info.media_info.duration }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </article>
        <!-- banner -->
        <div v-if="props.banner" class="wrap">
          <img data-v-2ee6444e="" :src="props?.banner" />
        </div>
        <footer v-if="props.pageType !== 'detail'" class="f-footer-ctrl">
          <div class="m-diy-btn m-box-center-a">
            <i class="lite-iconf lite-iconf-report">
              <van-icon name="share-o" />
            </i>
            <h4>{{ numValue(card.mblog.reposts_count) }}</h4>
          </div>
          <div class="m-diy-btn m-box-center-a">
            <i class="lite-iconf lite-iconf-report">
              <van-icon name="chat-o" />
            </i>
            <h4>{{ numValue(card.mblog.comments_count) }}</h4>
          </div>
          <div class="m-diy-btn m-box-center-a">
            <i class="lite-iconf lite-iconf-report">
              <van-icon name="good-job-o" />
            </i>
            <h4>{{ numValue(card.mblog.attitudes_count) }}</h4>
          </div>
          <aside @click="moreMenu(card)">
            <van-icon class="lite-iconf m-font-dot-more" name="ellipsis" />
          </aside>
        </footer>
      </div>
    </div>
  </div>
  <van-action-sheet
    v-model:show="show"
    :actions="actions"
    cancel-text="取消"
    @select="onSelect"
    :round="false"
  />
</template>

<style scoped lang="scss">

.f-weibo {
  &.card9 {
    border-bottom: 0.5px solid #e6e6e6;

    > .card-wrap {
      margin-left: 12px;
      margin-right: 12px;
    }

    .weibo-top {
      padding: 0 0 0 4px;

      .m-img-box {
        width: 32px;
        height: 32px;
      }

      .m-box-col {
        .m-icon {
          margin-left: 3px;
        }
      }
    }
  }

  .weibo-top {
    .m-text-box {
      width: 100%;
      margin: 2px 0 2px 8px;

      h4 {
        color: #939393;
        font-size: 11px;
        line-height: 1.5;
      }
    }
  }
}

.m-img-box {
  width: 100%;
  display: inline-block;

  img {
    width: 100%;
    height: 100%;
    vertical-align: top;
    object-fit: fill;
  }
}

.m-avatar-box {
  .m-img-box {
    border-radius: 50%;
    position: relative;

    img {
      border-radius: 50%;
    }

    &::before {
      content: '';
      border: 0.5px solid rgba(0, 0, 0, 0.5);
      border-color: hsla(0, 0%, 90.2%, 0.15);
      position: absolute;
      z-index: 2;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-radius: 50%;
    }

    .m-icon {
      position: absolute;
      z-index: 3;
      right: -2px;
      bottom: -2px;
    }
  }
}

.card {
  .card-wrap {
    .card-main {
      > .m-box {
        height: 100%;
      }
    }
  }
}

:deep(.card9) {
  > .card-wrap {
    padding-top: 15px;
  }

  .weibo-main {
    .weibo-media {
      margin-top: 10px;

      .m-auto-list {
        li {
          display: inline-block;
          vertical-align: top;
        }

        .m-auto-box1 {
          box-sizing: border-box;
          width: 100%;
          padding: 0;
        }

        .m-auto-box2 {
          box-sizing: border-box;
          width: 34%;
          padding: 0 5px 5px 0;
        }

        .m-auto-box3 {
          box-sizing: border-box;
          width: 33.33%;
          padding: 0 5px 5px 0;
        }

        .m-imghold-4-3 {
          padding-bottom: 100%;
        }
      }
    }

    .weibo-text {
      line-height: 24px;
      word-wrap: break-word;

      a {
        color: #3c6e9e;
      }
    }

    .url-icon {
      display: inline-block;
      vertical-align: middle;
      margin-right: 2px;
      width: 16px;
      height: 24px;
      line-height: 24px;

      img {
        width: 16px !important;
        height: 16px !important;
      }
    }

    .f-media {
      margin-top: 10px;
    }

    a {
      color: #3c6e9e;
    }
  }

  .card {
    &.m-panel {
      box-shadow: none;
      border-top-width: 1px;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 1px;
      border-color: #f0f0f0;
      border-style: solid;
      background-color: #f8f8f8;
    }

    .card-wrap {
      .card-main {
        padding: 0;
        margin: 0 -12px;
      }
    }

    .m-img-box {
      width: 70px;
      height: 70px;
    }

    .card-main {
      > .m-box {
        > .m-box-col {
          margin: 0 0.625rem;
          overflow: hidden;
        }
      }

      > .m-box {
        > .m-box-col {
          margin-left: 0;
        }
      }
    }

    .m-text-box {
      h3 {
        margin: 0;
      }

      h4 {
        margin: 0;
      }
    }
  }

  &.card {
    margin: 0 0 6px 0;
  }
}

.card26 {
  .m-img-box {
    margin-right: 10px;
  }
}

.f-weibo {
  &.card9 {
    .weibo-main {
      .weibo-og {
        padding: 12px 0 0 4px;
      }
    }
  }

  .weibo-main {
    .weibo-og {
      font-size: 16px;
    }
  }

  .m-img-box {
    background-color: #e6e6e6;
  }

  .m-text-box {
    h4 {
      font-size: 11px;
    }
  }
}

.m-box-dir {
  flex-direction: column;
  align-items: flex-start;
}

.m-text-box > * {
  margin: 0 0 6px 0;
}

.m-text-box {
  > :last-child {
    // .m-text-cut {
    margin: 0;
    // }
  }

  h3 {
    font-size: 16px;
    color: #333;
    line-height: 1.4;

    .m-icon {
      vertical-align: -2px;
    }
  }

  h4 {
    font-size: 12px;
    color: #636363;
    line-height: 1.5;
  }
}

.card-video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;

  &.vertical {
    width: 0;
    padding-right: 43.75%;
  }

  .mwb-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.mwb-video {
  background: #000;
  color: #fff;
  user-select: none;

  .m-img-box {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-size: 100%;
    background-position: 50%;
    overflow: hidden;
  }

  .mwbv-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 54px;
    height: 54px;
    line-height: 64px;
    margin: -27px 0 0 -27px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  button {
    padding: 0;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 38px;
  }

  .mwbv-info-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 16px;
    padding: 15px 0 5px;
    background-image: linear-gradient(
      -180deg,
      transparent 3%,
      rgba(0, 0, 0, 0.2) 98%
    );

    .m-box {
      margin: 0 5px;
      line-height: 16px;
      font-size: 12px;
      text-shadow: 0 0 2px rgb(0 0 0 / 40%);
    }
  }
}

.m-box-col {
  flex: 1;
  width: 100%;
  display: block;
  min-width: 0;
}

.m-img-box {
  img {
    width: 100%;
    height: 100%;
    vertical-align: top;
    object-fit: cover;
  }
}

.wrap {
  margin: 12px;
  font-size: 0;

  img {
    width: 100%;
    height: 100%;
  }
}

.f-footer-ctrl {
  border-top-width: 0;
  height: 17px;
  padding: 16px 6px 16px 0;
  margin: 0 12px;
  overflow: hidden;

  .m-diy-btn {
    color: rgba(40, 47, 60, 0.8);
    height: 100%;
    float: left;

    h4 {
      font-size: 13px;
      display: inline-block;
      margin-top: 0;
      margin-left: 4px;
    }

    & + .m-diy-btn {
      margin-left: 27px;
    }
  }

  .lite-iconf {
    font-size: 18px;
  }

  aside {
    float: right;
    color: rgba(40, 47, 60, 0.8);
  }

  .m-font-dot-more {
    display: flex;
  }
}

.m-box-center-a {
  display: flex;
  align-items: center;
}

.weibo-skeleton {
  background: #fff;
  padding: 10px 0;
  border-bottom: 0.5px solid #e6e6e6;
  position: relative;
  z-index: 999;
}

.f-bg-img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
  position: absolute;
  width: 100%;
  height: 100%;
}

[class*='m-imghold'] {
  height: 0;
  position: relative;
}

// 会员等级
.m-icon-vipl7 {
  background-position: -14px -770px;
}

.m-icon-vipl6 {
  background-position: -14px -686px;
}

.m-icon-vipl5 {
  background-position: -14px -644px;
}

.m-icon-vipl4 {
  background-position: -14px -602px;
}

.m-icon-vipl3 {
  background-position: -14px -560px;
}

.m-icon-vipl2 {
  background-position: -14px -518px;
}

.m-icon-vipl1 {
  background-position: -14px -476px;
}

.rest-preview .rv-image-preview__image-wrapper img {
  display: flex;
  flex: 1;
}

.m-box-center {
  display: flex;
  justify-content: center;
}

.m-text-cut {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
